<template>
  <div class="menuList">
      <el-submenu v-if="item.children && item.children.length > 0" :index="item.path" >
        <template slot="title">
          <!-- <i class="iconfont" :class="item.icon" v-if="item.id.toString().length==1"></i> -->
          <span slot="title">{{item.menuName}}</span>
        </template>

        <template v-for="child of item.children">

          <sidebar-item :item="child" :base-path="resolvePath(child.path)" v-if="child.children && child.children.length>0" />
          <div v-else>
                <a class="jiaxing" v-if="child.menuName == '嘉兴'" target="_blank"  :href="'http://134.100.1.130:8083/jx_analysis/#/virtualLogin?userMobile=' + tel" >{{child.menuName}}</a>
                <a class="jiaxing" v-else-if="child.menuName == '杭州'" target="_blank"  :href="'http://134.108.39.84:8081/login?redirect=%2Findex&phone=' + tel" >{{child.menuName}}</a>
                <a class="jiaxing" v-else-if="child.menuName == '温州'" target="_blank"  :href="'http://134.104.255.252:8085/login?redirect=%2Findex&phone=' + tel" >{{child.menuName}}</a>
                <a class="jiaxing" v-else-if="child.menuName == '金华'" target="_blank"  :href="'http://134.106.76.3:8086/login?redirect=%2Findex&phone=' + tel" >{{child.menuName}}</a>
                <a class="jiaxing" v-else-if="child.menuName == '台州'" target="_blank"  :href="'http://134.108.81.50:30101/login?redirect=%2Findex&phone=' + tel" >{{child.menuName}}</a>
                <a class="jiaxing" v-else-if="child.menuName == '湖州'" target="_blank"  :href="'http://134.99.194.253:8081/login?redirect=%2Findex&phone=' + tel" >{{child.menuName}}</a>
                <a class="jiaxing" v-else-if="child.menuName == '衢州'" target="_blank"  :href="'http://134.96.249.134:8000/qzAnalysis/login?redirect=%2Findex&phone=' + tel" >{{child.menuName}}</a>
                <a class="jiaxing" v-else-if="child.menuName == '温州'" target="_blank"  :href="'http://134.104.255.252:8085/login?redirect=%2Findex&phone=' + tel" >{{child.menuName}}</a>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '省政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '温州政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '湖州政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '衢州政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '杭州政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '宁波政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '嘉兴政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '金华政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '台州政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '丽水政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '舟山政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item class="jiaxing" v-else-if="child.menuName == '绍兴政企'" @click="getPath(child)">{{child.menuName}}</el-menu-item>
                <el-menu-item  v-else  :route="child.path" :index="child.path">{{child.menuName}}</el-menu-item>
          </div>
          <!-- <el-menu-item v-else :route="child.path" :index="child.path">{{child.menuName == '嘉兴' ? '11' : child.menuName}}</el-menu-item> -->
        </template>
      </el-submenu>
      <el-menu-item v-else :index="item.path" :route="{'path':resolvePath(item.path)}">
        <!-- <i class="iconfont" :class="item.icon"></i>-->
        <span slot="title">{{item.menuName}}</span>

      </el-menu-item>
  </div>
</template>
<script>
  import path from 'path'
  import { getSessionStorage } from "@/common/js/storage";
  export default {
    name: 'sidebar-item',
    components: {

    },
    props: {
      // 一级路由对象
      item: {
        type: Object,
        required: true
      },
      basePath: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        onlyOneChild: null,
        tel: JSON.parse(getSessionStorage("SysUserCode"))
      }
    },
    methods: {
        getPath(item) {
            let arr = item.path.split('?')
            this.$router.push({
                path: arr[0],
                query: {
                    code: arr[1]
                }
            })
        },
      hasOneShowingChildren(children, parent) {
        // 把 children 里面没有 hidden 属性的元素，收集起来，看看有哪些
        // 1、后面要来判断，children 里面是不是只有一个
        // 2、亦或者没有 【比如 '/login' 这个 route 就没有 children】
        // 3、亦或者 children 里面的子路由大于1个
        const showingChildren = children.filter(item => {
          if(item.hidden) {
            return false
          } else {
            // 这个地方就一直循环下去，至于是不是只有一个child，在后面会判断
            this.onlyOneChild = item
            return true
          }
        })
        // 只有 1 个，符合我们这个函数的目的，返回 true
        if(showingChildren.length === 1) {
          return true
        }

        // 如果最终没有任何结果的话，就显示父元素路由
        if(showingChildren.length === 0) {
          this.onlyOneChild = {
            ...parent,
            path: '',
            noShowingChild: true
          }
          return true
        }

        return false
      },
      resolvePath(routePath) {
        // console.log(path.resolve(this.basePath, routePath))
        return path.resolve(this.basePath, routePath)
      }
    },
    created() {
      // console.log(this.basePath)
    }
  }
</script>


<style lang="scss">
  // .menuList{
  //   display:inline-block;
  //   margin-left: 10px;

   // li{
   //   border-radius: 50px;
   // }
   // .el-menu-item, .el-submenu__title{
   //   height: 35px;
   //   line-height: 35px;
   //   border-radius: 50px;
   // }
  // }
// .router-link-exact-active.curr li {
//   background:#418ee9;
//   span {
//     color:#fff;
//   }
// }
// .el-menu-item.is-active {
//   color:#fff;
// }
.el-menu-item i.iconfont,
.el-submenu__title i.iconfont {
  display:inline-block;
  width:20px;
  font-size: 18px;
  position:relative;
  left:-8px;
}
// .el-menu--inline{
//   .el-submenu__title{
//      padding-left:20px !important;
//     }
//     .el-menu--inline{
//       .el-submenu__title{
//          padding-left:40px !important;
//         }
//         .el-menu--inline{
//           .el-submenu__title{
//              padding-left:60px !important;
//             }
//             .el-menu--inline{
//                 .el-menu-item{
//                    padding-left:70px !important;
//                   }
//             }
//         }
//     }
// }

.el-submenu__title:hover,
.el-menu-item:hover {
  position: relative;
  // &:before {
  //   content:"";
  //   position: absolute;
  //   left:0;
  //   top:0;
  //   bottom:0;
  //   border-left:5px solid #3d88e4;
  // }
}
// .el-submenu .el-menu-item {
//   padding-left:48px!important;
//   height: 45px!important;
//   line-height: 45px!important;
// }
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-submenu>.el-submenu__title span {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
}
// .el-menu-item,.el-submenu__title {
//   color:#cdd1d6!important;
// }
// .el-menu-item.is-active {
//   background:#418ee9!important;
//   color:#fff!important;
// }
.jiaxing {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 134, 255);
    height: 36px;
    line-height: 36px;
    min-width: 200px;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0 10px;
    float: none;
    display: flex;
    flex: 1;
}
</style>
